<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <canvas width="600" height="400"></canvas>
    <script>
        // 1. 构造函数
        var LineChart = function(ctx){
            this.ctx = ctx || document.querySelector("canvas").getContext("2d");

            this.canvasHeight = this.ctx.canvas.height;
            this.canvasWidth = this.ctx.canvas.width;        

            // 网格大小
            this.gridSize = 20;
            // // 坐标系间距
            // this.space = 20;
            // 箭头大小
            this.arrowSize = 10;             
            // 点的宽度
            this.dottedSize = 4;

            this.x0 = this.gridSize;
            this.y0 = this.canvasHeight - this.gridSize;

        }
        // 2. 行为方法
        LineChart.prototype.init = function(data){
            this.drawGrid();
            this.drawAxis();
            this.drawDotteds(data);
        }
        // 绘制网格
        LineChart.prototype.drawGrid = function(){
            var xLineTotal = Math.floor(this.canvasHeight / this.gridSize);
            for (var i = 0; i < xLineTotal; i++) {
                this.ctx.beginPath();
                this.ctx.moveTo(0,i * this.gridSize + 0.5);
                this.ctx.lineTo(this.canvasWidth-this.gridSize,i * this.gridSize + 0.5);
                this.ctx.strokeStyle = "rgba(0,0,0,.5)";
                this.ctx.stroke();
            }
            var yLineTotal = Math.floor(this.canvasWidth / this.gridSize);
            for (var i = 0; i < yLineTotal; i++) {
                this.ctx.beginPath();
                this.ctx.moveTo(i * this.gridSize + 0.5,0);
                this.ctx.lineTo(i * this.gridSize + 0.5 ,this.canvasHeight-this.gridSize);
                this.ctx.strokeStyle = "rgba(0,0,0,.5)";
                this.ctx.stroke();
            }
        }
        
        // 绘制坐标系
        LineChart.prototype.drawAxis = function(){
    
                this.ctx.beginPath();
                this.ctx.moveTo(this.x0,this.y0);
                this.ctx.lineTo(this.canvasWidth - this.gridSize,this.y0);
                this.ctx.strokeStyle = "rgba(0,0,0,1)";
                this.ctx.stroke();
    
                this.ctx.lineTo(this.canvasWidth - this.gridSize - this.arrowSize,this.y0 + this.arrowSize / 2);
                this.ctx.lineTo(this.canvasWidth - this.gridSize - this.arrowSize,this.y0 - this.arrowSize / 2);
                this.ctx.lineTo(this.canvasWidth - this.gridSize,this.y0);
                this.ctx.fill();

                this.ctx.beginPath();
                this.ctx.moveTo(this.x0,this.y0);
                this.ctx.lineTo(this.gridSize, 0);
                this.ctx.strokeStyle = "rgba(0,0,0,1)";
                this.ctx.stroke();
            
                this.ctx.lineTo(this.gridSize + this.arrowSize / 2, this.arrowSize );
                this.ctx.lineTo(this.gridSize - this.arrowSize / 2 , this.arrowSize);
                this.ctx.lineTo(this.gridSize,0);
                this.ctx.fill();
        }
        // 绘制点
        LineChart.prototype.drawDotteds = function(){
            // 1. 数据的坐标转换成canvas 的坐标
            var that = this;
            // 记录上一个坐标
            var preDotX = 0;
            var preDotY = 0;
            data.forEach(function(item,i){
                // canvas原点是(20,canvasHitght) 
                // 点的坐标(x+20,canvasHeight - y)
                var canvasX = that.x0 + item.x;
                var canvasY = that.y0 - item.y;
                // 2. 绘制
                that.ctx.beginPath();
                that.ctx.moveTo(canvasX - that.dottedSize / 2,canvasY - that.dottedSize / 2 );
                that.ctx.lineTo(canvasX + that.dottedSize / 2,canvasY - that.dottedSize / 2 );
                that.ctx.lineTo(canvasX + that.dottedSize / 2,canvasY + that.dottedSize / 2 );
                that.ctx.lineTo(canvasX - that.dottedSize / 2,canvasY + that.dottedSize / 2 );
                that.ctx.closePath();
                that.ctx.fill();
                that.ctx.strokeStyle = "black";
                that.ctx.stroke();
                // 3. 连线
                // 3.1 第一个点 (x0,y0)
                if (i == 0 ) {
                    that.ctx.beginPath();
                    that.ctx.moveTo(that.x0,that.y0 + 0.5);
                    that.ctx.lineTo(canvasX,canvasY + 0.5);
                    that.ctx.stroke();
                }
                // 3.2 非第一个点
                else {
                    that.ctx.beginPath();
                    that.ctx.moveTo(preDotX,preDotY+ 0.5);
                    that.ctx.lineTo(canvasX,canvasY+ 0.5);
                    that.ctx.stroke();    
                }
                preDotX = canvasX;
                preDotY = canvasY;
            });
           
        }
        // 3. 初始化
        var data = [
            { 
              x:100,
              y:100
            },
            {
              x:200,
              y:200
            },
            {
              x:300,
              y:300
            },
            {
              x:350,
              y:350
            }
        ];
        var LineChart = new LineChart();
        LineChart.init();
    </script>
</body>
</html>